<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>活动</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../public/css/iconfont.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">

</head>

<body>
    <div class="page">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left" href="javascript:history.back(-1)"
                data-transition='slide-out'>
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title">活动</h1>
        </header>
        
        <%- include ("../common/publicnav.ejs")%>

        <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" data-distance="100">
            <!-- 默认的下拉刷新层 -->
            <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>
            <!-- 这里是页面内容区 -->
            <div class="page-index">
                <%for(var i=0;i<list.length;i++) { %>

                <div class="card demo-card-header-pic">
                    <div valign="bottom" class="card-header color-white no-border no-padding">
                        <img class='card-cover'
                            src="../../../<%=list[i].facePic%>"
                            alt="">
                    </div>
                    <div class="card-content">
                        <div class="card-content-inner">
                            <p class="color-gray">发表于 <%=list[i].userName%></p>
                            <p><%=list[i].postData%></p>
                        </div>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="link">赞</a>
                        <a  data-post="<%=list[i].id%>" onclick="goPost(this)" class="link">更多</a>
                    </div>
                </div>

                <% } %>
                
            </div>
            <div class="infinite-scroll-preloader">
                <div class="preloader"></div>
            </div>
        </div>
    </div>

    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js'
        charset='utf-8'></script>
    <script>
        $.init()

        var loading = false;
        // 最多可加载的条目
        // var maxItems = 100;

        // 每次加载添加多少条目
        // var itemsPerLoad = 20;
        function addItems(data) {
            // 生成新条目的HTML
            var html = '';
            for (var i = 0; i < data.length; i++) {
                html += `
                <div class="card demo-card-header-pic">
                    <div valign="bottom" data-post="${data[i].id}" onclick="goPost(this)" class="card-header color-white no-border no-padding">
                        <img class='card-cover'
                            src="${data[i].pic}"
                            alt="">
                    </div>
                    <div class="card-content">
                        <div class="card-content-inner">
                            <p class="color-gray">发表于 ${data[i].userName}</p>
                            <p>${data[i].postData}</p>
                        </div>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="link">赞</a>
                        <a data-post="${data[i].id}" onclick="goPost(this)" class="link">更多</a>
                    </div>
                </div>
                    `
            }
            // 添加新条目
            $('.infinite-scroll-bottom .page-index').append(html);

        }
        //预先加载20条
        // addItems(itemsPerLoad, 0);

        // 上次加载的序号

        // var lastIndex = 20;

        // 注册'infinite'事件处理函数
        var pageNumber = 1
        $(document).on('infinite', '.infinite-scroll-bottom', function () {

            // 如果正在加载，则退出
            if (loading) return;

            // 设置flag
            loading = true;

            // 模拟1s的加载过程
            setTimeout(function () {
                // 重置加载flag
                loading = false;

                // if (lastIndex >= maxItems) {
                //     // 加载完毕，则注销无限加载事件，以防不必要的加载
                //     $.detachInfiniteScroll($('.infinite-scroll'));
                //     // 删除加载提示符
                //     $('.infinite-scroll-preloader').remove();
                //     return;
                // }
                $.ajax({
                    type: 'get',
                    url: '/homepage/getPost',
                    // data to be added to query string:
                    data: {
                        pageNumber: pageNumber
                    },
                    // type of data we are expecting in return:
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        if (data.err == 0) {
                            addItems(data.data);
                            pageNumber++;
                        } else {
                            $.alert(data.msg);
                        }
                    }
                })
                // 添加新条目

                // 更新最后加载的序号
                // lastIndex = $('.list-container li').length;
                //容器发生改变,如果是js滚动，需要刷新滚动
                $.refreshScroller();
            }, 1000);
        });

        function goPost(obj) {
            console.log(obj.dataset.post)
            window.location.href = '/post/post/' + obj.dataset.post + '/detail'
        }
        function goUser(obj) {
            console.log(obj.dataset.user)

        }
    </script>
</body>

</html>